<!-- 定时 -->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="添加定时条件"
    style="width: 40%; height: 100%; float: right; margin: 0"
    :before-close="Cancel"
    :close-on-click-modal="false"
  >
    <el-form :model="form" :rules="rules" ref="ruleFormRef" label-position="top">
      <!-- 重复时间 -->
      <el-form-item label="重复时间" style="padding: 3%">
        <el-checkbox v-model="WeekAll" label="*" size="large" @change="Checkall">全选</el-checkbox>
        <el-checkbox-group v-model="form.executionWeek" size="large">
          <el-checkbox-button label="MONDAY" border>星期一</el-checkbox-button>
          <el-checkbox-button label="TUESDAY" border>星期二</el-checkbox-button>
          <el-checkbox-button label="WEDNESDAY" border>星期三</el-checkbox-button>
          <el-checkbox-button label="THURSDAY" border>星期四</el-checkbox-button>
          <el-checkbox-button label="FRIDAY" border>星期五</el-checkbox-button>
          <el-checkbox-button label="SATURDAY" border>星期六</el-checkbox-button>
          <el-checkbox-button label="SUNDAY" border>星期日</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="时间" style="margin: 4% 0 0 3%">
        <el-time-picker
          v-model="form.startTime"
          format="HH:mm:ss"
          value-format="HH:mm:ss"
          @change="ddd"
        />
      </el-form-item>
      <!-- <div style="margin: 4% 0 0 3%">CRON &nbsp;&nbsp;&nbsp;{{ CronValue }}</div> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button v-if="showDelete" type="danger" @click="DeleteConditions">删除</el-button>
        <el-button @click="Cancel">取消</el-button>
        <el-button type="primary" @click="submit"> 确定 </el-button>
        <!-- <el-button type="primary" @click="logaa"> 确定456 </el-button> -->
      </div>
    </template>
  </el-dialog>
</template>
   
<script>
import { defineComponent, ref, watch, onMounted } from 'vue'

import { ElMessage } from 'element-plus'
import { ElTimePicker } from 'element-plus'
import { v4 as uuidv4 } from 'uuid'
export default defineComponent({
  setup(_, { emit }) {
    // 监听日期的全选和反选

    onMounted(() => {
      watch(
        () => form.value.executionWeek,
        (newValue) => {
          if (newValue?.length === 7) {
            WeekAll.value = ['*']
          } else {
            WeekAll.value = ['']
          }
        },
        { deep: true } // 添加 deep: true 选项
      )
    })

    // 页面 表单
    const form = ref({
      executionWeek: ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY'],
      startTime: '00:00:00',
      endTime: '',
      id: '',
      dayall: null
    })
    // 表单实例对象
    const ruleFormRef = ref(null)
    // 页面 表单校验规则
    const rules = [{ name: { required: true, message: '请输入任务名称', trigger: 'blur' } }]
    // 页面 显示 隐藏
    const dialogVisible = ref(false)
    // 页面 星期 全选
    const WeekAll = ref(['*'])
    //
    const showDelete = ref(false)
    const dayall = ref([
      {
        name: 'MONDAY',
        value: '星期一'
      },
      {
        name: 'TUESDAY',
        value: '星期二'
      },
      {
        name: 'WEDNESDAY',
        value: '星期三'
      },
      {
        name: 'THURSDAY',
        value: '星期四'
      },
      {
        name: 'FRIDAY',
        value: '星期五'
      },
      {
        name: 'SATURDAY',
        value: '星期六'
      },
      {
        name: 'SUNDAY',
        value: '星期日'
      }
    ])
    //
    //
    //
    // 页面 全选 点击事件
    const Checkall = () => {
      const allweek = ['MONDAY', 'TUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY', 'SUNDAY']
      if (WeekAll.value.length) {
        form.value.executionWeek = allweek
      } else {
        form.value.executionWeek = []
      }
    }

    // 页面 确定
    const submit = () => {
      const result = []
      dayall.value.forEach((item) => {
        form.value.executionWeek.forEach((event) => {
          if (item.name === event) {
            result.push(item.value)
          }
        })
      })
      form.value.dayall = result

      form.value.endTime = form.value.startTime.replace(/:00$/, ':01')
      const list = [
        {
          conditionType: 'AUTO_SCHED_CONDITION_TYPE_TIMED',
          statusName: '定时',
          id: uuidv4(),
          dayall: form.value.dayall,
          Change: 'Time',
          executionWeek: [
            'MONDAY',
            'TUESDAY',
            'WEDNESDAY',
            'THURSDAY',
            'FRIDAY',
            'SATURDAY',
            'SUNDAY'
          ],
          startTime: form.value.startTime,
          endTime: form.value.endTime
        }
      ]
      emit('updataTiming', list)
      Cancel()
    }
    // 页面 取消
    const Cancel = () => {
      form.value = {
        executionWeek: [
          'MONDAY',
          'TUESDAY',
          'WEDNESDAY',
          'THURSDAY',
          'FRIDAY',
          'SATURDAY',
          'SUNDAY'
        ],
        startTime: '00:00:00',
        endTime: '',
        id: '',
        dayall: null
      }
      dialogVisible.value = false
    }

    // 修改
    const changeValue = (data) => {
      form.value = data[0]
      dialogVisible.value = true
    }

    const logaa = () => {}
    // 删除
    const DeleteConditions = () => {
      emit('DeleteConditions')
      Cancel()
    }

    const ddd = () => {
      if (!form.value.startTime) {
        form.value.startTime = '00:00:00'
      }
    }
    return {
      showDelete,
      dialogVisible,
      form,
      rules,
      ruleFormRef,
      WeekAll,
      Checkall,
      Cancel,
      submit,
      logaa,
      changeValue,
      DeleteConditions,
      ddd
    }
  }
})
</script>
   
   <style>
</style>